


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>  vue基础排错（基于vue2.6.11版本） |    经验分享</title>
  <!-- 标签页图标 -->
  

  <!-- 图标库 -->
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">
  <!-- 动画库 -->
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fushaolei/cdn-white@1.0/css/animate.css"/>
  
  <!-- css文件 -->
  
<link rel="stylesheet" href="/blog/css/white.css">

  
<link rel="stylesheet" href="/blog/css/highlight.css">

  <!-- 代码高亮 -->
  
<meta name="generator" content="Hexo 5.0.0"></head>


<body>

<div class="menu-outer">
    <div class="menu-inner">
      <div class="menu-site-name  animate__animated  animate__fadeInUp">
        <a href="/blog/">
          经验分享
        </a>
        
      </div>
      <div class="menu-group">
        <ul class="menu-ul">
        
          <a href="/blog/" class="nav-link">
            <li class="menu-li  animate__animated  animate__fadeInUp">
              首页
            </li>
          </a>
        
          <a href="/blog/archives" class="nav-link">
            <li class="menu-li  animate__animated  animate__fadeInUp">
              文章列表
            </li>
          </a>
        
        
        
        <a href="/blog/search">
          <li class="menu-li  animate__animated  animate__fadeInUp">
            <i class="ri-search-line"></i>
          </li>
        </a>
        
          <li class="menu-li animate__animated  animate__fadeInUp" id="mobile-menu">
            <i class="ri-menu-line"></i>
          </li>
        
        </ul>

      </div>

    </div>
</div>
<div id="mobile-main" class="animate__animated  animate__fadeIn">
  <div class="mobile-menu-inner">
    <div class="mobile-menu-site-name animate__animated  animate__fadeInUp">
      <a href="/blog/">
        经验分享
      </a>
    </div>
    <div class="mobile-menu-group" id="mobile-close">
      <i class="ri-close-line"></i>
    </div>

  </div>

  <div class="mobile-menu-div">
  
    <a href="/blog/" class="mobile-nav-link">
      <div class="mobile-menu-child animate__animated  animate__fadeInUp">
        <span>首页</span>
      </div>
    </a>
  
    <a href="/blog/archives" class="mobile-nav-link">
      <div class="mobile-menu-child animate__animated  animate__fadeInUp">
        <span>文章列表</span>
      </div>
    </a>
  
  
    <a href="/blog/search">  
      <div class="mobile-menu-child  animate__animated  animate__fadeInUp">
        <i class="ri-search-line"></i>
      </div>
    </a>
    
  </div>


</div>

<div class="body-outer">
  <div class="body-inner">
    
<article class="post-inner">
  <div class="post-content-outer">
    <div class="post-intro">
      <div class="post-title animate__animated  animate__fadeInUp">vue基础排错（基于vue2.6.11版本）</div>
      <div class="meta-intro animate__animated  animate__fadeInUp">Aug 16 2020</div>
      
    </div>
    <div class="post-content-inner">
      <div class="post-content-inner-space">

      </div>
      <div class="post-content-main animate__animated  animate__fadeInUp">
        <!-- top型目录 -->
        
        <hr>
<p>title: vue基础排错（基于vue2.6.11版本）<br>date: 2020-08-16 21:50:03<br>tags:</p>
<hr>
<h2 id="JS语法类错误"><a href="#JS语法类错误" class="headerlink" title="JS语法类错误"></a>JS语法类错误</h2><h3 id="案例：methods中方法调用了未申明变量"><a href="#案例：methods中方法调用了未申明变量" class="headerlink" title="案例：methods中方法调用了未申明变量"></a>案例：methods中方法调用了未申明变量</h3><h4 id="错误代码"><a href="#错误代码" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line">    methods: &#123;</span><br><span class="line">      add() &#123;</span><br><span class="line"><span class="javascript">        <span class="comment">// 使用了未申明的变量a</span></span></span><br><span class="line">        a++</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    mounted() &#123;</span><br><span class="line"><span class="javascript">      <span class="built_in">this</span>.add()</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="错误图示"><a href="#错误图示" class="headerlink" title="错误图示"></a>错误图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e1.png" >
        </sapn>
      </p>
<h4 id="图示说明"><a href="#图示说明" class="headerlink" title="图示说明"></a>图示说明</h4><p>vue框架针对这类错误会给出俩块错误提示 </p>
<blockquote>
<p>标记为1的地方是vue框架给出的发生错误的组件中的位置  上图的意思是错误发生在Root根组件的mounted声明周期函数中</p>
<p>标记为2的地方是vue框架给出的发生错误的js语言中调用栈的位置 上图的意思是错误发生在add方法调用的时候</p>
</blockquote>
<h4 id="解决方案总结"><a href="#解决方案总结" class="headerlink" title="解决方案总结"></a>解决方案总结</h4><p>!&gt; 这一类错误都是相同的排错方式   按照下面的步骤即可</p>
<ol>
<li><p>根据1错误块得到错误发生在哪个组件以及具体发生在组件的哪个阶段</p>
</li>
<li><p>根据2错误块找到错误发生的调用栈位置  直接点击定位错误</p>
</li>
<li><p>根据错误信息提示在错误定位的地方修改即可</p>
</li>
</ol>
<h2 id="Vue框架规则类错误"><a href="#Vue框架规则类错误" class="headerlink" title="Vue框架规则类错误"></a>Vue框架规则类错误</h2><h3 id="1-使用html或者body作为挂载元素"><a href="#1-使用html或者body作为挂载元素" class="headerlink" title="1. 使用html或者body作为挂载元素"></a>1. 使用html或者body作为挂载元素</h3><h4 id="报错图示"><a href="#报错图示" class="headerlink" title="报错图示"></a>报错图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e2.png" >
        </sapn>
      </p>
<h4 id="错误代码-1"><a href="#错误代码-1" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--错误！挂载到根元素--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el:<span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析"><a href="#原因分析" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>Vue框架不允许把html或者body作为挂载的根元素</p>
</blockquote>
<h4 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>把挂载根元素换成普通元素即可</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id&#x3D;&quot;app&quot;&gt;&lt;&#x2F;div&gt;</span><br></pre></td></tr></table></figure>

<h3 id="2-模板中使用了某个属性或者方法但是没有在配置项中声明"><a href="#2-模板中使用了某个属性或者方法但是没有在配置项中声明" class="headerlink" title="2.模板中使用了某个属性或者方法但是没有在配置项中声明"></a>2.模板中使用了某个属性或者方法但是没有在配置项中声明</h3><h4 id="报错图示-1"><a href="#报错图示-1" class="headerlink" title="报错图示"></a>报错图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e3.png" >
        </sapn>
      </p>
<h4 id="错误代码-2"><a href="#错误代码-2" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!--模板使用了name但是在实例选项中没有申明--&gt;</span></span><br><span class="line">  &#123;&#123;name&#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line">    computed:&#123;&#125;</span><br><span class="line">    data: &#123;&#125;,</span><br><span class="line">    methods: &#123;&#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析-1"><a href="#原因分析-1" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>在vue组件实例的模板中使用到的属性值或者方法必须要在实例的配置项中定义好才可以使用</p>
</blockquote>
<h4 id="解决方案-1"><a href="#解决方案-1" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>根据错误提示的内容，去组件实例选项中查看是否未定义该属性，查找范围包括data,computed,methods,props</p>
</blockquote>
<h3 id="3-Vue实例配置项命名重复"><a href="#3-Vue实例配置项命名重复" class="headerlink" title="3.Vue实例配置项命名重复"></a>3.Vue实例配置项命名重复</h3><h4 id="报错图示-2"><a href="#报错图示-2" class="headerlink" title="报错图示"></a>报错图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e4.png" >
        </sapn>
      </p>
<h4 id="错误代码-3"><a href="#错误代码-3" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line">    data: &#123;</span><br><span class="line"><span class="javascript">      name: <span class="string">&#x27;cp&#x27;</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    props: &#123;</span><br><span class="line">      name: &#123;</span><br><span class="line"><span class="javascript">        type: <span class="built_in">String</span></span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    computed: &#123;</span><br><span class="line">      name() &#123;&#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      name() &#123;</span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">`cp`</span>)</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析-2"><a href="#原因分析-2" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>Vue框架不允许data/props/computed/methods中任意两项出现重复的属性名，在初始化配置时会进行名称检测</p>
</blockquote>
<h4 id="解决方案-2"><a href="#解决方案-2" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>根据错误提示找到哪里发生了重复，找到重复属性名更改为不重复即可</p>
</blockquote>
<h3 id="4-v-for指令使用时-key绑定的值存在重复"><a href="#4-v-for指令使用时-key绑定的值存在重复" class="headerlink" title="4. v-for指令使用时:key绑定的值存在重复"></a>4. v-for指令使用时:key绑定的值存在重复</h3><h4 id="错误图示-1"><a href="#错误图示-1" class="headerlink" title="错误图示"></a>错误图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e5.png" >
        </sapn>
      </p>
<h4 id="错误代码-4"><a href="#错误代码-4" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;item in list&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item.id&quot;</span>&gt;</span></span><br><span class="line">      &#123;&#123;item.name&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line">    data: &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 这里有重复id</span></span></span><br><span class="line">      list: [</span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">&#x27;react&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">&#x27;vue&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">&#x27;angular&#x27;</span> &#125;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析-3"><a href="#原因分析-3" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>为保证列表的高效更新  vue框架在我们使用v-for指令的时候要求为每一项绑定一个唯一的key属性，注意key必须是唯一不可重复的  代码中的存在重复的id 所以会报错</p>
</blockquote>
<h4 id="解决方案-3"><a href="#解决方案-3" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>每次给key绑定值时确保是唯一的值</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;item in list&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item.id&quot;</span>&gt;</span></span><br><span class="line">      &#123;&#123;item.name&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line">    data: &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 这里有重复id</span></span></span><br><span class="line">      list: [</span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">&#x27;react&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">&#x27;vue&#x27;</span> &#125;,</span></span><br><span class="line"><span class="javascript">        &#123; <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">name</span>: <span class="string">&#x27;angular&#x27;</span> &#125;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="5-组件中的data没有使用函数类型"><a href="#5-组件中的data没有使用函数类型" class="headerlink" title="5.组件中的data没有使用函数类型"></a>5.组件中的data没有使用函数类型</h3><h4 id="错误图示-2"><a href="#错误图示-2" class="headerlink" title="错误图示"></a>错误图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e6.png" >
        </sapn>
      </p>
<h4 id="错误代码-5"><a href="#错误代码-5" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;add-component&#x27;</span>, &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 错误！！</span></span></span><br><span class="line">    data: &#123;</span><br><span class="line"><span class="javascript">      name: <span class="string">&#x27;cp&#x27;</span></span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析-4"><a href="#原因分析-4" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>上面申明的组件add-component上面的data属性直接配置了一个对象，这在vue的组件系统中是不允许的，因为组件的核心使用场景是复用，data如果直接赋值一个对象，那么多个重复的组件会共用一套数据，一个组件进行数据更改所有组件都会受到影响，违背了组件的功能独立性</p>
</blockquote>
<h4 id="解决方案-4"><a href="#解决方案-4" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>任何一个组件的data都应该申明为一个函数，函数中返回一个对象，这个全新的对象作为组件的依赖数据</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;add-component&#x27;</span>, &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 正确</span></span></span><br><span class="line">    data()&#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        name:<span class="string">&#x27;cp&#x27;</span></span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="6-组件有多个根元素"><a href="#6-组件有多个根元素" class="headerlink" title="6. 组件有多个根元素"></a>6. 组件有多个根元素</h3><h4 id="错误图示-3"><a href="#错误图示-3" class="headerlink" title="错误图示"></a>错误图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e7.png" >
        </sapn>
      </p>
<h4 id="错误代码-6"><a href="#错误代码-6" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">add-component</span>&gt;</span><span class="tag">&lt;/<span class="name">add-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;add-component&#x27;</span>, &#123;</span></span><br><span class="line">    template: `</span><br><span class="line"><span class="handlebars"><span class="xml">     <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">     <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span></span><br><span class="line">    `</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析-5"><a href="#原因分析-5" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>vue组件的的template选项中只能拥有一个根元素  原因是因为一是为了做组件样式隔离，二是为了渲染时存放当前的组件对应的vnode，所以只能有一个根元素  这在vue3.0中会得到改善</p>
</blockquote>
<h4 id="解决方案-5"><a href="#解决方案-5" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>只写一个根元素</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">add-component</span>&gt;</span><span class="tag">&lt;/<span class="name">add-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;add-component&#x27;</span>, &#123;</span></span><br><span class="line">    template: `</span><br><span class="line"><span class="handlebars"><span class="xml">     <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">    `</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="7-组件命名和HTML内置标签重复"><a href="#7-组件命名和HTML内置标签重复" class="headerlink" title="7. 组件命名和HTML内置标签重复"></a>7. 组件命名和HTML内置标签重复</h3><h4 id="错误图示-4"><a href="#错误图示-4" class="headerlink" title="错误图示"></a>错误图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e8.png" >
        </sapn>
      </p>
<h4 id="错误代码-7"><a href="#错误代码-7" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="comment">// 错误！！</span></span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;header&#x27;</span>, &#123;</span></span><br><span class="line">    data()&#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;&#125;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析-6"><a href="#原因分析-6" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>Vue框架对于组件的命名规则有一定限制，不允许和HTML内置标签发生名称重复，上面组件的名称header和HTML内置标签中的header标签重复，关于vue中的组件命名希望大家严格遵守 </p>
</blockquote>
<h4 id="解决方案-6"><a href="#解决方案-6" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>将组件名称替换成规范的命名规则即可</p>
</blockquote>
<h3 id="8-组件未先在父组件的components选项中注册，就在父组件的模板中使用"><a href="#8-组件未先在父组件的components选项中注册，就在父组件的模板中使用" class="headerlink" title="8. 组件未先在父组件的components选项中注册，就在父组件的模板中使用"></a>8. 组件未先在父组件的components选项中注册，就在父组件的模板中使用</h3><h4 id="错误图示-5"><a href="#错误图示-5" class="headerlink" title="错误图示"></a>错误图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e9.png" >
        </sapn>
      </p>
<h4 id="错误代码-8"><a href="#错误代码-8" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">father-component</span>&gt;</span><span class="tag">&lt;/<span class="name">father-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;father-component&#x27;</span>, &#123;</span></span><br><span class="line">    template:`</span><br><span class="line"><span class="handlebars"><span class="xml">      <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">        我是父组件</span><br><span class="line"><span class="handlebars"><span class="xml">        <span class="tag">&lt;<span class="name">son-component</span>&gt;</span><span class="tag">&lt;/<span class="name">son-component</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">    `</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line">    components:&#123;</span><br><span class="line"><span class="javascript">      <span class="string">&#x27;son-component&#x27;</span>:&#123;</span></span><br><span class="line">        template:`</span><br><span class="line"><span class="handlebars"><span class="xml">          <span class="tag">&lt;<span class="name">div</span>&gt;</span>我是子组件<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">        `</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析-7"><a href="#原因分析-7" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>组件 并没有在父组件 中注册，所以并不能正常使用，大家一定要记着，全局组件在每一个vue实例的模板中都能正常使用，而局部注册的组件只有在父组件的components选项中注册时候才能使用</p>
</blockquote>
<h4 id="解决方案-7"><a href="#解决方案-7" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>在父组件的components中注册一下组件即可</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">father-component</span>&gt;</span><span class="tag">&lt;/<span class="name">father-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;father-component&#x27;</span>, &#123;</span></span><br><span class="line">    template:`</span><br><span class="line"><span class="handlebars"><span class="xml">      <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">        我是父组件</span><br><span class="line"><span class="handlebars"><span class="xml">        <span class="tag">&lt;<span class="name">son-component</span>&gt;</span><span class="tag">&lt;/<span class="name">son-component</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">    `,</span><br><span class="line"><span class="javascript">    <span class="comment">// 注册局部组件！！！</span></span></span><br><span class="line">    components:&#123;</span><br><span class="line"><span class="javascript">      <span class="string">&#x27;son-component&#x27;</span>:&#123;</span></span><br><span class="line">        template:`</span><br><span class="line"><span class="handlebars"><span class="xml">          <span class="tag">&lt;<span class="name">div</span>&gt;</span>我是子组件<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">        `</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="9-组件的template和render函数至少要存在一项"><a href="#9-组件的template和render函数至少要存在一项" class="headerlink" title="9. 组件的template和render函数至少要存在一项"></a>9. 组件的template和render函数至少要存在一项</h3><h4 id="错误图示-6"><a href="#错误图示-6" class="headerlink" title="错误图示"></a>错误图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e10.png" >
        </sapn>
      </p>
<h4 id="错误代码-9"><a href="#错误代码-9" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">add-component</span>&gt;</span><span class="tag">&lt;/<span class="name">add-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;add-component&#x27;</span>, &#123;</span></span><br><span class="line">    data() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;&#125;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="javascript">  <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析-8"><a href="#原因分析-8" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>尝试渲染组件，但是组件中既没有tempalte选项又没有render函数，因为vue组件的渲染最终是要执行render函数的，如果render函数存在就以render函数为准，如果render函数不存在，则会把template选项编译成为render函数再执行  所以这俩个需要申明其中的一个</p>
</blockquote>
<h4 id="解决方案-8"><a href="#解决方案-8" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>申明template选项或者申明render函数</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;add-component&#x27;</span>, &#123;</span></span><br><span class="line">    template:`</span><br><span class="line"><span class="handlebars"><span class="xml">     <span class="tag">&lt;<span class="name">div</span>&gt;</span>this is add-component<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">    `,</span><br><span class="line">    data() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;&#125;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="javascript">  <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="10-子组件尝试直接修改父组件传递过来的数据"><a href="#10-子组件尝试直接修改父组件传递过来的数据" class="headerlink" title="10. 子组件尝试直接修改父组件传递过来的数据"></a>10. 子组件尝试直接修改父组件传递过来的数据</h3><h4 id="错误图示-7"><a href="#错误图示-7" class="headerlink" title="错误图示"></a>错误图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e11.png" >
        </sapn>
      </p>
<h4 id="错误代码-10"><a href="#错误代码-10" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">add-component</span> <span class="attr">title</span>=<span class="string">&quot;this is title&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">add-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;add-component&#x27;</span>, &#123;</span></span><br><span class="line">    props: &#123;</span><br><span class="line">      title: &#123;</span><br><span class="line"><span class="javascript">        type: <span class="built_in">String</span></span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: `</span><br><span class="line"><span class="handlebars"><span class="xml">     <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">      </span><span class="template-variable">&#123;&#123;<span class="name">title</span>&#125;&#125;</span></span></span><br><span class="line"><span class="handlebars"><span class="xml">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>修改数据<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">    `,</span><br><span class="line">    methods:&#123;</span><br><span class="line">      change()&#123;</span><br><span class="line"><span class="javascript">        <span class="comment">// 尝试直接修改父组件传过来的数据</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.title = <span class="string">&#x27;new title&#x27;</span></span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="javascript">  <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="原因分析-9"><a href="#原因分析-9" class="headerlink" title="原因分析"></a>原因分析</h4><blockquote>
<p>上面的代码中，title数据来源于父组件，在子组件按钮点击时尝试直接修改title数据，基于vue单向数据流的要求，我们不能反向子组件直接修改父组件的数据  所以会报错</p>
</blockquote>
<h4 id="解决方案-9"><a href="#解决方案-9" class="headerlink" title="解决方案"></a>解决方案</h4><blockquote>
<p>可以通过事件传递的方式，通过调用父组件的一个方法进行修改title数据，这样的话就符合父组件修改自己数据的要求，或者我们可以把props中的title赋值给子组件data中的一个新的值，让它成为子组件自己的数据，这样的话就可以子组件自己修改了</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">add-component</span> <span class="attr">title</span>=<span class="string">&quot;this is title&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">add-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&#x27;add-component&#x27;</span>, &#123;</span></span><br><span class="line">    props: &#123;</span><br><span class="line">      title: &#123;</span><br><span class="line"><span class="javascript">        type: <span class="built_in">String</span></span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    data() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        childTitle: <span class="built_in">this</span>.title</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: `</span><br><span class="line"><span class="handlebars"><span class="xml">     <span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">      </span><span class="template-variable">&#123;&#123;<span class="name">childTitle</span>&#125;&#125;</span></span></span><br><span class="line"><span class="handlebars"><span class="xml">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>修改数据<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span></span><br><span class="line">    `,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      change() &#123;</span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.childTitle = <span class="string">&#x27;new title&#x27;</span></span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span></span></span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="拼写类错误"><a href="#拼写类错误" class="headerlink" title="拼写类错误"></a>拼写类错误</h2><h4 id="错误代码-11"><a href="#错误代码-11" class="headerlink" title="错误代码"></a>错误代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    el: <span class="string">&#x27;#app&#x27;</span>,</span></span><br><span class="line">    data: &#123;</span><br><span class="line"><span class="javascript">      name: <span class="string">&quot;cp&quot;</span></span></span><br><span class="line">    &#125;,</span><br><span class="line"><span class="javascript">    <span class="comment">// 拼写类错误</span></span></span><br><span class="line">    method:&#123;</span><br><span class="line">      add()&#123;&#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    mounted()&#123;</span><br><span class="line"><span class="javascript">      <span class="built_in">this</span>.add()</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="错误图示-8"><a href="#错误图示-8" class="headerlink" title="错误图示"></a>错误图示</h4><p>
        <span class="lazyload-img-span">
        <img   
           data-src="http://cp_fe.gitee.io/assets/vue/e12.png" >
        </sapn>
      </p>
<h4 id="错误分析"><a href="#错误分析" class="headerlink" title="错误分析"></a>错误分析</h4><p>!&gt; 此类错误并不会直接告诉你是拼写错了，如果你发现貌似根据错误提示怎么找都找不到，那么试着检查下，vue的配置项是不是拼写错了</p>

        <!-- 分类文章 -->
        
      </div>
      <div class="post-content-inner-space">
        
          <div class="space-toc-main animate__animated  animate__fadeInUp">
            <ol class="space-toc"><li class="space-toc-item space-toc-level-2"><a class="space-toc-link" href="#JS%E8%AF%AD%E6%B3%95%E7%B1%BB%E9%94%99%E8%AF%AF"><span class="space-toc-text">JS语法类错误</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#%E6%A1%88%E4%BE%8B%EF%BC%9Amethods%E4%B8%AD%E6%96%B9%E6%B3%95%E8%B0%83%E7%94%A8%E4%BA%86%E6%9C%AA%E7%94%B3%E6%98%8E%E5%8F%98%E9%87%8F"><span class="space-toc-text">案例：methods中方法调用了未申明变量</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%9B%BE%E7%A4%BA"><span class="space-toc-text">错误图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%9B%BE%E7%A4%BA%E8%AF%B4%E6%98%8E"><span class="space-toc-text">图示说明</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E6%80%BB%E7%BB%93"><span class="space-toc-text">解决方案总结</span></a></li></ol></li></ol></li><li class="space-toc-item space-toc-level-2"><a class="space-toc-link" href="#Vue%E6%A1%86%E6%9E%B6%E8%A7%84%E5%88%99%E7%B1%BB%E9%94%99%E8%AF%AF"><span class="space-toc-text">Vue框架规则类错误</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#1-%E4%BD%BF%E7%94%A8html%E6%88%96%E8%80%85body%E4%BD%9C%E4%B8%BA%E6%8C%82%E8%BD%BD%E5%85%83%E7%B4%A0"><span class="space-toc-text">1. 使用html或者body作为挂载元素</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E6%8A%A5%E9%94%99%E5%9B%BE%E7%A4%BA"><span class="space-toc-text">报错图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-1"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="space-toc-text">解决方案</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#2-%E6%A8%A1%E6%9D%BF%E4%B8%AD%E4%BD%BF%E7%94%A8%E4%BA%86%E6%9F%90%E4%B8%AA%E5%B1%9E%E6%80%A7%E6%88%96%E8%80%85%E6%96%B9%E6%B3%95%E4%BD%86%E6%98%AF%E6%B2%A1%E6%9C%89%E5%9C%A8%E9%85%8D%E7%BD%AE%E9%A1%B9%E4%B8%AD%E5%A3%B0%E6%98%8E"><span class="space-toc-text">2.模板中使用了某个属性或者方法但是没有在配置项中声明</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E6%8A%A5%E9%94%99%E5%9B%BE%E7%A4%BA-1"><span class="space-toc-text">报错图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-2"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90-1"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-1"><span class="space-toc-text">解决方案</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#3-Vue%E5%AE%9E%E4%BE%8B%E9%85%8D%E7%BD%AE%E9%A1%B9%E5%91%BD%E5%90%8D%E9%87%8D%E5%A4%8D"><span class="space-toc-text">3.Vue实例配置项命名重复</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E6%8A%A5%E9%94%99%E5%9B%BE%E7%A4%BA-2"><span class="space-toc-text">报错图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-3"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90-2"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-2"><span class="space-toc-text">解决方案</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#4-v-for%E6%8C%87%E4%BB%A4%E4%BD%BF%E7%94%A8%E6%97%B6-key%E7%BB%91%E5%AE%9A%E7%9A%84%E5%80%BC%E5%AD%98%E5%9C%A8%E9%87%8D%E5%A4%8D"><span class="space-toc-text">4. v-for指令使用时:key绑定的值存在重复</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%9B%BE%E7%A4%BA-1"><span class="space-toc-text">错误图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-4"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90-3"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-3"><span class="space-toc-text">解决方案</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#5-%E7%BB%84%E4%BB%B6%E4%B8%AD%E7%9A%84data%E6%B2%A1%E6%9C%89%E4%BD%BF%E7%94%A8%E5%87%BD%E6%95%B0%E7%B1%BB%E5%9E%8B"><span class="space-toc-text">5.组件中的data没有使用函数类型</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%9B%BE%E7%A4%BA-2"><span class="space-toc-text">错误图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-5"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90-4"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-4"><span class="space-toc-text">解决方案</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#6-%E7%BB%84%E4%BB%B6%E6%9C%89%E5%A4%9A%E4%B8%AA%E6%A0%B9%E5%85%83%E7%B4%A0"><span class="space-toc-text">6. 组件有多个根元素</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%9B%BE%E7%A4%BA-3"><span class="space-toc-text">错误图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-6"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90-5"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-5"><span class="space-toc-text">解决方案</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#7-%E7%BB%84%E4%BB%B6%E5%91%BD%E5%90%8D%E5%92%8CHTML%E5%86%85%E7%BD%AE%E6%A0%87%E7%AD%BE%E9%87%8D%E5%A4%8D"><span class="space-toc-text">7. 组件命名和HTML内置标签重复</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%9B%BE%E7%A4%BA-4"><span class="space-toc-text">错误图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-7"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90-6"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-6"><span class="space-toc-text">解决方案</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#8-%E7%BB%84%E4%BB%B6%E6%9C%AA%E5%85%88%E5%9C%A8%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9A%84components%E9%80%89%E9%A1%B9%E4%B8%AD%E6%B3%A8%E5%86%8C%EF%BC%8C%E5%B0%B1%E5%9C%A8%E7%88%B6%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A8%A1%E6%9D%BF%E4%B8%AD%E4%BD%BF%E7%94%A8"><span class="space-toc-text">8. 组件未先在父组件的components选项中注册，就在父组件的模板中使用</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%9B%BE%E7%A4%BA-5"><span class="space-toc-text">错误图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-8"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90-7"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-7"><span class="space-toc-text">解决方案</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#9-%E7%BB%84%E4%BB%B6%E7%9A%84template%E5%92%8Crender%E5%87%BD%E6%95%B0%E8%87%B3%E5%B0%91%E8%A6%81%E5%AD%98%E5%9C%A8%E4%B8%80%E9%A1%B9"><span class="space-toc-text">9. 组件的template和render函数至少要存在一项</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%9B%BE%E7%A4%BA-6"><span class="space-toc-text">错误图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-9"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90-8"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-8"><span class="space-toc-text">解决方案</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#10-%E5%AD%90%E7%BB%84%E4%BB%B6%E5%B0%9D%E8%AF%95%E7%9B%B4%E6%8E%A5%E4%BF%AE%E6%94%B9%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E9%80%92%E8%BF%87%E6%9D%A5%E7%9A%84%E6%95%B0%E6%8D%AE"><span class="space-toc-text">10. 子组件尝试直接修改父组件传递过来的数据</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%9B%BE%E7%A4%BA-7"><span class="space-toc-text">错误图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-10"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90-9"><span class="space-toc-text">原因分析</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-9"><span class="space-toc-text">解决方案</span></a></li></ol></li></ol></li><li class="space-toc-item space-toc-level-2"><a class="space-toc-link" href="#%E6%8B%BC%E5%86%99%E7%B1%BB%E9%94%99%E8%AF%AF"><span class="space-toc-text">拼写类错误</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E4%BB%A3%E7%A0%81-11"><span class="space-toc-text">错误代码</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%9B%BE%E7%A4%BA-8"><span class="space-toc-text">错误图示</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E9%94%99%E8%AF%AF%E5%88%86%E6%9E%90"><span class="space-toc-text">错误分析</span></a></li></ol></li></ol></li></ol>
           </div>
        
      </div>
   </div>
    <!-- 评论 -->
    
    <div class="bottom-comments-outer">
      <div class="bottom-comments-inner">
        <!-- valine -->
        
        <!-- Gitalk -->
        
        <!-- livere -->
        
        </div>
      </div>
    
  </div>
</article>
  </div>
</div>



<!-- 如果是home模式的话，不在首页就显示footer，如果不是home模式的话 所有都显示footer -->

  <div class="footer-outer animate__animated  animate__fadeInUp">
    <div class="footer-inner">
    <div class="footer-text">
    <p>黑马培训前端</p>

    </div>
    <div class="footer-contact">
    <ul class="footer-ul">
        
        <li class="footer-li">
            <a href="https://github.com/FuShaoLei/hexo-theme-white" target="_blank">
                <i class="ri-github-line"></i>
            </a>
        </li>
        
        <li class="footer-li">
            <a href="mailto:1563250958@qq.com" target="_blank">
                <i class="ri-mail-line"></i>
            </a>
        </li>
        
    </ul>
    </div>
    </div>
</div>






<script src="/blog/js/white.js"></script>


<script src="/blog/js/highlight.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

</body>
</html>
